<template>
	<div class="hot-search">
		<div class="hs-header">
			<h1>超级搜</h1>
			<p>淘宝&nbsp;&nbsp;天猫&nbsp;&nbsp;京东&nbsp;&nbsp;拼多多&nbsp;&nbsp;全网覆盖</p>
			<div class="seabar"
				@click="goSea()"
			>
				<i class="iconfont">&#xe620;</i>
				<span>请输入搜索内容</span>
				<label>搜索</label>
			</div>
		</div>
		<div class="sea-keyword">
			<div class="header">
				<div class="line"></div>
				<p>大家都在搜</p>
				<div class="line"></div>
			</div>
			<div class="sk-content">
				<ul>
					<li v-for="(keyword, index) in keywordList"
						@click="goSear(index)"
					>
						{{keyword.keyword}}
					</li>
					<div class="clear"></div>
				</ul>
			</div>
		</div>
		<div class="sea-article">
			<div class="header">
				<div class="line"></div>
				<p>搜券教程</p>
				<div class="line"></div>
			</div>
			<div class="sa-content" v-html="article"></div>
		</div>
		<BotNav :cateindex=2></BotNav>
	</div>
</template>
<script>
	import BotNav from '../components/BotNav.vue'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		components: {
			BotNav
		},
		data(){
			return{
				keywordList: [],
				article:''
			}
		},
		mounted(){
            var params = new URLSearchParams();
            params.append('type', 'search');
			axios.post(Http.RULECONTENT,params).then( res => {
				var ret = res.data;
				this.article = ret['data']['content']
			})
			this.getKw()
		},
		methods: {
			goSea: function(){
				this.$router.push('search')
			},
			goSear: function(index){
				let keyword = this.keywordList[index].keyword;
				this.$router.push('/searchdetail/1/' + keyword)
			},
			getKw: function(){
				axios.get(Http.HOTKEY).then( res => {
					var ret = res.data;
					this.keywordList = ret['data'];
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.hot-search{
		width: 100%;
		.hs-header{
			height: 3rem;
			padding-top: 1.2rem;
			background: url(../assets/img/super_search_bg.png) top center no-repeat;
			background-size: 100%;
			h1{
				margin-bottom: 0.2rem;
				font-size: 0.44rem;
				color: #fff;
			}
			p{
				margin-bottom: 0.3rem;
				color: rgba(256,256,256,0.6);
				font-size: 0.26rem;
			}
			.seabar{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 10%;
				width: 80%;
				height: 0.66rem;
				line-height: 0.66rem;
				border-radius: 0.66rem;
				background: #fff;
				.iconfont{
					width: 0.66rem;
					height: 0.66rem;
					text-align: center;
					line-height: 0.66rem;
					font-size: 0.34rem;
				}
				span{
					margin-left: -2rem;
				}
				label{
					margin-right: -0.04rem;
					width: 1.4rem;
					height: 0.66rem;
					line-height: 0.66rem;
					text-align: center;
					color: #fff;
					border-radius: 0 0.66rem 0.66rem 0;
					background: linear-gradient(to right,rgb(255,101,68), $color);
				}
			}
		}
		.sea-keyword{
			width: 100%;
			border-bottom: 0.2rem solid #e7e6f1;
			padding-top: 0.4rem;
			.header{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 0.3rem;
				width: 100%;
				p{
					margin: 0 1rem;
					font-size: 0.28rem;
				}
			}
			.sk-content{
				ul{
					padding: 0 0.24rem 0.2rem 0.24rem;
					li{
						float: left;
						padding: 0 0.28rem;
						margin-right: 0.2rem;
						height: 0.6rem;
						line-height: 0.6rem;
						border-radius: 0.6rem;
						margin-bottom: 0.2rem;
						border: 1px solid #e4e7ef;
						font-size: 0.26rem;
						color: #666;
						&:nth-of-type(5n+5){
							margin-right: 0;
						}
					}
				}
			}
		}
		.sea-article{
			width: 100%;
			pading-bottom: 0.6rem;
			padding-top: 0.4rem;
			.header{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 0.3rem;
				width: 100%;
				p{
					margin: 0 1rem;
					font-size: 0.28rem;
				}
			}
			.sa-content{
				text-align: left;
			}
		}
	}
</style>